import { observer } from 'mobx-react'
import userStore from "@/store/userStore.ts";
import { changeName } from '@/api/user.ts'
import {Card, Col, Form, Input, message, Row} from "antd";
import {ICommonResponse, ISqlUpdate} from "@/global.ts";
const Workplace = () => {
    const blur = async (e: { target: { value: string } }) => {
        if (userStore.name === userStore.user.name) return
        const response: ICommonResponse<ISqlUpdate> = await changeName({ email: userStore.user?.email as string, name: e.target.value })
        if (response.code === 200) {
            message.success('修改成功')
            userStore.changeUserName(e.target.value)
        } else {
            message.error('修改失败')
        }
    }
    const change = (e: { target: { value: string } }) => {
        userStore.changeName(e.target.value)
    }
    return (
        <Card title="欢迎回来" bordered={false} style={{ width: '100%' }}>
            <Row gutter={[8, 8]}>
                <Col xs={24} sm={12} md={12} lg={8} xl={8}>
                    <Form.Item label='用户名' labelCol={{ span: 5 }} wrapperCol={{ span: 17 }}>
                        <Input value={userStore.name} onBlur={blur} onChange={change} maxLength={9}/>
                    </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={12} lg={8} xl={8}>
                    <Form.Item label='邮箱' labelCol={{ span: 5 }} wrapperCol={{ span: 17 }}>
                        <Input value={userStore.user?.email} disabled />
                    </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={12} lg={8} xl={8}>
                    <Form.Item label='私钥' labelCol={{ span: 5 }} wrapperCol={{ span: 17 }}>
                        <Input value={userStore.user?.secretKey} disabled />
                    </Form.Item>
                </Col>
                <Col xs={24} sm={12} md={12} lg={8} xl={8}>
                    <Form.Item label='角色' labelCol={{ span: 5 }} wrapperCol={{ span: 17 }}>
                        <Input value={userStore.user.role === 'super' ? '管理员' : '用户'} disabled />
                    </Form.Item>
                </Col>
            </Row>
        </Card>
    )
}

export default observer(Workplace)